<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>模拟器列表</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>模拟器列表</h1>
<table id="simulatorTable">
    <thead>
    <tr>
        <th>模拟器ID</th>
        <th>名称</th>
        <th>类型</th>
        <th>端口</th>
        <th>操作</th>
        <th><button id="addSimulatorBtn">新增模拟器</button></th>
    </tr>
    </thead>
    <tbody>
    <!-- 模拟器列表数据 -->
    </tbody>
</table>

<!-- 模拟器新增弹窗 -->
<div id="addSimulatorModal" class="modal">
    <div class="modal-content">
        <span class="close">×</span>
        <h2>新增模拟器</h2>
        <form id="addSimulatorForm">
            <label for="id">ID:</label>
            <input type="text" id="id" name="id"  style="width: 800px"><br><br>
            <label for="name">名称:</label>
            <input type="text" id="name" name="name" style="width: 800px" required><br><br>
            <label for="type">类型:</label>
            <input type="text" id="type" name="type" style="width: 800px" required><br><br>
            <label for="port">端口:</label>
            <input type="text" id="port" name="port" style="width: 800px" required><br><br>
            <label for="poolSize">池大小:</label>
            <input type="text" id="poolSize" name="poolSize" style="width: 800px" required><br><br>
            <label for="overTcp">是否OverTCP:</label>
            <input type="checkbox" id="overTcp" name="overTcp" style="width: 100px" ><br><br>
            <label for="uintId">从机ID:</label>
            <input type="text" id="uintId" name="uintId" style="width: 800px" required><br><br>
            <input type="submit" value="提交">
        </form>
    </div>
</div>

<!-- 设置模拟字段弹窗 -->
<div id="setFieldsModal" class="modal">
    <div class="modal-content">
        <span class="close">×</span>
        <h2>设置模拟字段</h2>
        <form id="setFieldsForm">
            <div id="fieldsContainer">
                <div class="fieldRow">
                    <label for="ref">地址:</label>
                    <input type="text" name="ref" required>
                    <label for="name">指标名:</label>
                    <input type="text" name="name" required>
                    <label for="before">先值:</label>
                    <input type="text" name="before" required>
                    <label for="after">后值:</label>
                    <input type="text" name="after" required>
                    <label for="change">变形:</label>
                    <select name="change" required>
                        <option value="range">range</option>
                        <option value="acc">acc</option>
                    </select>
                    <button type="button" onclick="removeFieldRow(this)" style="width: 500px;background: #fa9f1b">删除</button>
                    <br/>
                    <label for="extendInfo">时段</label>
                    <textarea type="text" name="extendInfo" ></textarea>
                </div>
            </div>
            <button type="button" onclick="addFieldRow()">添加字段</button><br><br>
            <input type="submit" value="提交">
        </form>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
